<template>
  <div class="report-container">
    <div class="report-left">
      <div class="report-upload-content">
        <p class="report-upload-title">文件列表</p>
        <img src="@/assets/images/file-upload.png" class="report-upload-icon" @click="addFile"></img>
      </div>
      <div>
        <a-tree :data="treeData">
          <template #icon>
          </template>
          <template #extra="nodeData">
            <a-dropdown>
              <img src="@/assets/images/more-icon.png" alt="" v-if="!nodeData.children">
              <template #content>
                <a-doption @click="downFile">下载</a-doption>
                <a-doption @click="deleteFile">删除</a-doption>
              </template>
            </a-dropdown>
          </template>
        </a-tree>
      </div>
    </div>
    <div class="report-right">
      <img src="@/assets/images/registerManage/empty.png" alt="">
    </div>
  </div>
</template>

<script setup lang=ts>
import { h } from 'vue';

const treeData = [
    {
      title: '证书文本信息',
      key: 'node1',
      icon: () => h('img',{
            src:"/src/assets/images/file_icon.png"
          }),
      children: [
        {
          title: 'xx数据资产登记证书',
          key: 'node2',
          icon: () => h('img',{
            src:"/src/assets/images/word-icon.png"
          }),
        },
        {
          title: 'xx数据资产登记证书',
          key: 'node2',
          icon: () => h('img',{
            src:"/src/assets/images/pdf-icon.png"
          }),
        },
      ],
    },
    {
      title: '证书文本信息',
      key: 'node3',
      icon: () => h('img',{
            src:"/src/assets/images/file_icon.png"
          }),
      children: [
        {
          title: 'xx数据资产登记证书',
          key: 'node4',
          icon: () => h('img',{
            src:"/src/assets/images/word-icon.png"
          }),
        },
        {
          title: 'xx数据资产登记证书',
          key: 'node5',
          icon: () => h('img',{
            src:"/src/assets/images/png-icon.png"
          }),
        },
      ],
    },
  ];

const addFile = () => {
  console.log('点击了添加文件”')
}

const handleSelect =(val)=>{
  console.log("选择了",val)
}

const downFile = (val)=>{
  console.log('要下载的文件',val)
}
const deleteFile = (val)=>{
  console.log('要删除的文件',val)
}

</script>
<style lang="less" scoped>
.report-container{
  display: flex;
  height: 100vh;
}
.report-left{
  width: 280px;
  padding: 0 24px;
}
.report-right{
  flex: 1;
 
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-upload-title{
  color: #394D73;
  font-weight: 700;
}
.report-upload-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
.report-upload-icon{
  width: 24px;
  height: 24px;
}

</style>